<template>
  <div id="right">

    <el-tabs type="border-card">
      <!-- 最热文章 -->
      <el-tab-pane>
        <span slot="label"><font-awesome-icon :icon="['fas', 'fire']"></font-awesome-icon></span>
        <dl>
          <dd>
            <div class="left-img">
              <img :src="imgUrl">
            </div>
            <div class="right-content">
              <div class="title">这是我的第一篇博客</div>
              <!-- 作者 -->
              <div class="icon user">
                <font-awesome-icon :icon="['fas', 'user']" class="fa-sm"></font-awesome-icon>
                <span>zeng</span>
              </div>
              <!-- 热度 -->
              <div class="icon hot">
                <font-awesome-icon :icon="['fas', 'fire']" class="fa-sm"></font-awesome-icon>
                <span>2</span>
              </div>
            </div>
          </dd>
          <dd>
            <div class="left-img">
              <img :src="imgUrl">
            </div>
            <div class="right-content">
              <div class="title">这是我的第一篇博客</div>
              <!-- 作者 -->
              <div class="icon user">
                <font-awesome-icon :icon="['fas', 'user']" class="fa-sm"></font-awesome-icon>
                <span>zeng</span>
              </div>
              <!-- 热度 -->
              <div class="icon hot">
                <font-awesome-icon :icon="['fas', 'fire']" class="fa-sm"></font-awesome-icon>
                <span>2</span>
              </div>
            </div>
          </dd>
          <dd>
            <div class="left-img">
              <img :src="imgUrl">
            </div>
            <div class="right-content">
              <div class="title">这是我的第一篇博客</div>
              <!-- 作者 -->
              <div class="icon user">
                <font-awesome-icon :icon="['fas', 'user']" class="fa-sm"></font-awesome-icon>
                <span>zeng</span>
              </div>
              <!-- 热度 -->
              <div class="icon hot">
                <font-awesome-icon :icon="['fas', 'fire']" class="fa-sm"></font-awesome-icon>
                <span>2</span>
              </div>
            </div>
          </dd>
        </dl>
      </el-tab-pane>
      <el-tab-pane>
        <span slot="label"><font-awesome-icon :icon="['fas', 'comments']"></font-awesome-icon></span>
        最新留言
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script lang="ts">
  import {Component, Model, Prop, Vue, Watch} from 'vue-property-decorator'

  @Component
  export default class Right extends Vue {
    name = "right";
    imgUrl: string = "http://imain.net/usr/uploads/2018/02/1254835428.png";
  }
</script>

<style lang="scss">

  @import "../../assets/scss/config";
  /*@import "../../assets/scss/common";*/

  #right {
    width: $right-width;
    .icon {
      margin-right: 10px;
      display: inline-block;
      transition: color .3s;
      &.hot:hover {
        color: rgba(255, 0, 0, .6);
      }
      &.user:hover {
        color: rgb(64, 158, 255);
      }
    }
    dd {
      font-size: 12px;
      padding: 5px 0;
      .left-img {
        display: inline-block;
        height: 50px;
        width: 50px;
      }
      .right-content {
        display: inline-block;
        position: relative;
        vertical-align: middle;
        margin-left: 5px;
      }
      .title {
        width: 108px;
        overflow-x: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
    }
    img {
      height: 100%;
      width: 100%;
      border-radius: 50%;
      vertical-align: middle;
    }
  }

</style>
